<template>
  <div class="notice-wrapper">
    <Row>
      <Col :span="24" style="text-align: right;">
        <Button type="primary" @click="handleAdd">添加公告</Button>
      </Col>
    </Row>
    <Tabs style="margin-top: 15px;" v-model="tab" @on-click="handleTab">
      <TabPane label="当前展示公告" name="1">
        <Table
          ref="table"
          border
          :data="data1"
          :columns="columns"
          :loading="loading1"></Table>

          <div style="margin-top:20px; text-align: right;">
            <Page
              :total="total1"
              :current.sync="page1"
              :page-size-opts="[10, 20, 40, 80, 100]"
              show-total
              show-elevator
              show-sizer
              @on-change="pageChange1"
              @on-page-size-change="handleSizeChange1"
              style="margin: 15px 0;"></Page>
          </div>
      </TabPane>
      <TabPane label="历史公告" name="0">
        <Table
          ref="table"
          border
          :data="data0"
          :columns="columns"
          :loading="loading0">
        </Table>

        <div style="margin-top:20px; text-align: right;">
          <Page
            :total="total0"
            :current.sync="page0"
            :page-size-opts="[10, 20, 40, 80, 100]"
            show-total
            show-elevator
            show-sizer
            @on-change="pageChange0"
            @on-page-size-change="handleSizeChange0"
            style="margin: 15px 0;"></Page>
        </div>
      </TabPane>
    </Tabs>

    <dialog-operator
      :title="title"
      :data="formData"
      :type="type"
      v-model="visible"
      @ok="handleModalOk"></dialog-operator>
  </div>
</template>

<script>
  import dialogOperator from './components/dialog-operator';
  const COMPONENT_NAME = 'notice';

  export default {
    name: COMPONENT_NAME,
    data () {
      return {
        columns: [
          { title: '标题', key: 'title', align: 'center' },
          {
            title: '图片',
            align: 'center',
            render: (h, params) => {
              return h('div', {
                style: {
                  paddingTop: '5px',
                  paddingBottom: '5px'
                }
              }, [
                h('img', {
                  attrs: {
                    src: params.row.imgUrl
                  },
                  style: {
                    maxHeight: '80px'
                  }
                }),
              ]);
            }
          },
          { title: '内容', key: 'content', align: 'center' },
          {
            title: '详情页链接',
            align: 'center',
            render: (h, params) => {
              const { linkUrl } = params.row;
              return h('a', {
                attrs: {
                  href: linkUrl,
                  target: '_blank'
                },
                style: {
                  color: '#2d8cf0',
                  textDecoration: 'underline'
                }
              }, linkUrl);
            }
          },
          {
            title: '展示顺序',
            key: 'sortNo',
            width: 90,
            align: 'center'
          },
          { title: '上线时间', key: 'ctime', align: 'center' },
          { 
            title: '展示平台',
            key: 'target',
            align: 'center',
            render: (h, params) => {
              const { target } = params.row;
              let txt;
              if (target == 'android') {
                txt = '安卓';  
              } else if (target == 'ios') {
                txt = '苹果';
              } else if (target == 'h5') {
                txt = 'H5';
              } else if (target == 'all'){
                txt = '全部';
              } else {
                text = '';
              }
              return h('div', txt);
            }
          },
          {
            title: '操作',
            width: 140,
            align: 'center',
            render: (h, params) => {
              let row = params.row;
              const { id } = row;
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.handleEdit(row);
                    }
                  }
                }, '编辑'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '你确定要删除此公告吗？',
                    placement: 'left',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.handleDelete(id);
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    }
                  }, '删除')
                ])
              ]);
            }
          }
        ],
        data1: [], // 上架公告数据
        total1: 0,
        loading1: false,
        page1: 1,
        pageSize1: 10,
        data0: [], // 下架公告数据
        total0: 0,
        loading0: false,
        page0: 1,
        pageSize0: 10,
        title: '',
        visible: false,
        tab: '1', // 默认tab值 | 上架
        type: 'add',
        formData: {
          imgUrl: '',
          title: '',
          linkUrl: '',
          sortNo: '',
          status: '',
          target: '',
          content: ''
        }
      }
    },
    created () {
      this.getNoticeList(1);
    },
    methods: {
      // 获取当前的tab list
      getNoticeList() {
        let index = this.tab;
        this['loading'+index] = true;
        this.$http.get(`/helsinki/admin/appNotice?status=${index}&page=${this['page' + index]}&pageSize=${this['pageSize' + index]}`)
        .then(({data: { errcode, info, data }}) => {
          if (errcode == 0) {
            if (this.tab == 1) {
              this.data1 = data.list;
              this.total1 = data.size;
            } else {
              this.data0 = data.list;
              this.total0 = data.size;
            }
          }
          this['loading'+index] = false;
        }, error => {
          console.log(error);
        })
      },
      // Tab change
      handleTab (name) {
        this.tab = name;
        this.page = 1;
        this.pageSize = 10;
        this.getNoticeList();
      },
      // 新增公告
      handleAdd () {
        this.title = '添加公告';
        this.type = 'add';
        this.formData = {
          imgUrl: '',
          title: '',
          linkUrl: '',
          sortNo: '',
          status: '',
          target: '',
          content: ''
        };
        this.visible = true;
      },
      // 编辑公告
      handleEdit (row) {
        this.title = '编辑公告';
        this.type = 'update';
        this.formData.imgUrl = row.imgUrl;
        this.formData.title = row.title;
        this.formData.content = row.content;
        this.formData.linkUrl = row.linkUrl;
        this.formData.sortNo = row.sortNo;
        this.formData.status = row.status;
        this.formData.target = row.target;
        this.formData.id = row.id;
        this.visible = true;
      },
      // 删除公告
      handleDelete (id) {
        this.$http.post('/helsinki/admin/appNotice/delete', { 
          id: id
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.$Message.success('删除公告成功');
            this.getNoticeList();
          }
        }, error => {});
      },
      // 弹窗确认回调
      handleModalOk () {
        this.visible = false;
        this.getNoticeList();
      },
      // 分页
      pageChange1(val) {
			this.page1 = val;
			this.getNoticeList();
      },
      // 每页条数
      handleSizeChange1(val) {
        this.pageSize1 = val;
        this.getNoticeList();
      },
      // 分页
      pageChange0(val) {
        this.page0 = val;
        this.getNoticeList();
      },
      // 每页条数
      handleSizeChange0(val) {
        this.pageSize0 = val;
        this.getNoticeList();
      }
    },
    components: {
      dialogOperator
    }
  }
</script>

<style lang="scss" scoped>
  @import './list.scss';
</style>
